<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <input type="checkbox" name="" id="" v-model="isOk" />
      </div>
      <hr />
      <div>
        <input
          type="checkbox"
          name=""
          id="zj"
          v-model="seletedArr"
          value="周杰伦"
        />
        <label for="zj">周杰伦</label>

        <input
          type="checkbox"
          name=""
          id=""
          v-model="seletedArr"
          value="林俊杰"
        />林俊杰
        <input
          type="checkbox"
          name=""
          id=""
          v-model="seletedArr"
          value="陈奕迅"
        />陈奕迅
      </div>
      <hr />

      <div>
        <input type="radio" name="sex" id="n" value="1" v-model="sex" />
        <label for="n">男</label>

        <input type="radio" name="sex" id="nv" value="0" v-model="sex" />
        <label for="nv">女</label>

        <input type="radio" name="sex" id="image.png" value="2" v-model="sex" />
        <label for="image.png">其他</label>
      </div>
      <hr />

      <div>
        <select
          name=""
          id="input"
          class="form-control"
          v-model="selectedCourse"
        >
          <option value="">请选择</option>
          <option value="3">思修</option>
          <option value="2">艺术鉴赏</option>
          <option value="1">xxx鉴赏</option>
        </select>
      </div>
      <hr />

      <div>
        <select
          name=""
          id="input"
          class="form-control"
          v-model="selectedCourseArr"
          multiple
        >
          <option value="3">思修</option>
          <option value="2">艺术鉴赏</option>
          <option value="1">xxx鉴赏</option>
        </select>
      </div>
      <hr />

      <div>
        <select
          name=""
          id="input"
          class="form-control"
          v-model="selectedCourseArr2"
          multiple
        >
          <option v-for="v in arr" :value="v.id">{{v.name}}</option>
        </select>
      </div>
      <hr />

      <button @click="btnHandle()">按钮</button>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: function () {
          return {
            isOk: false,
            seletedArr: [],
            sex: "",
            selectedCourse: "",
            selectedCourseArr: [],
            selectedCourseArr2: [],

            arr: [
              { id: 2, name: "数学" },
              { id: 4, name: "语文" },
            ],
          };
        },
        methods: {
          btnHandle() {
            console.log(this.isOk);
            console.log(this.seletedArr);
            console.log(this.sex);
            console.log(this.selectedCourseArr);
            console.log(this.selectedCourseArr2);
          },
        },
      });
    </script>
  </body>
</html>
